<template>
	<div id='tmpl'>
		<div class='row' v-for='(item,index) in datalist'>
			<mt-switch class='switch' v-model="value[index]"></mt-switch>
			<div class='img2'><img class='img' :src="item.thumb_path" alt="商品图片"></div>
			<div class="inforight">
				<h4>{{item.title}}</h4>
				<div class="bottom">
				<ul>
					<li>￥{{item.sell_price}}</li>
					<li><carinputnumber></carinputnumber></li>
					<li><a href='javascript:void(0)' @click='delrow(item.id,index)'>删除</a></li>
				</ul>
				</div>
			</div>
		</div>
		<div class='Clearing'>
			<div class='desc'>
				<ul>
					<li>总计(不含运费)</li>
					<li>已勾选商品{{totalcount}}件,总价:￥{{totalAmount}}元</li>
				</ul>
			</div>
			<div class='desc_bt'>
				<button type="button" class="mui-btn mui-btn-danger">去结算</button>	
			</div>
		</div>
		{{value}}
	</div>
</template>
<script>
	import {removeItem} from '../../kits/localSg.js'
	import carinputnumber from '../subcom/carinputNumber.vue';
		export default{
			components:{
				carinputnumber
			},
			computed:{
				// 1.0定义计算总件数的属性
				totalcount(){
					// 计算逻辑，只需要计算出this.value数组中的true值有多少个即可
					var trueCout=this.value.filter(function(item) {
						return item;
					});
					// 计算当前选中商品的总价格
					var amount=0;
					this.value.forEach((item,index)=>{
						if(item){
							var count = this.datalist[index].cou;
							var price = this.datalist[index].sell_price;
							var itemamount = count*price;
							amount +=itemamount
						}
					})
					this.totalAmount=amount;
					return trueCout.length;
			},
			},
			data(){
				return{
				totalAmount:0,	
				value:[],	
				datalist:[
					{
						"cou": 1,
						"id": 87,
						"title": "华为（HUAWEI）荣耀6Plus 16G双4G版",
						"sell_price": 2195,
						"thumb_path": "//img20.360buyimg.com/mobilecms/s105x105_jfs/t9910/7/2538845028/246557/dcc015f9/59f977baN47fd9ef0.jpg!q90"
					},
					{
						"cou": 1,
						"id": 88,
						"title": "苹果Apple iPhone 6 Plus 16G 4G手机（联通三网版）",
						"sell_price": 5780,
						"thumb_path": "//img12.360buyimg.com/mobilecms/s105x105_jfs/t5515/360/1325429740/154518/9369447f/590ee807N4a542205.jpg!q90"
					}
				]
				}
			},
			methods:{
				// 删除一行数据
				delrow(goodsid,index){
				// 1.0 将this.value数组中的index这个位置的值移除
					this.value.splice(index,1);
				// 2.0 将this.datalist中的index这个位置的值移除
					this.datalist.splice(index,1)
				// 3.0 将localStorage中的goodsid对应的所有值移除
							
				}
			}
		}
</script>
<style scoped>
	.row{
		border-bottom: 1px solid rgba(0,0,0,0.3);
		height: 102px;
		display: flex;
	}
	.switch{
		padding-left: 2px;
	}
	.img2{
		padding-top: 5px;
	}
	.img{
	max-width:90px;max-height:90px;
	}
	.inforight h4{
		font: 14px;
		color:rgb(38,162,255);
	}
	.inforight ul{
		padding-left: 0px;
	}
	.inforight ul li{
		list-style: none;
		display: inline-block;
	}
	.bottom li:first-child{
		color:red;
	}
	.bottom li:last-child{
		color:rgb(38,162,255);
		margin-left: 10px;
	}
	.Clearing{
		height: 100px;
		display: flex;
		background: rgb(230,230,230);
	}
	.desc ul{
		list-style: none;
		padding-left: 10px;
		padding-top: 10px;
	}	
	.desc_bt{
		flex:0 0 60px;
		margin:30px;
	}
</style>